<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title | default("wxauto_Mgt Web管理界面") }}</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <link href="{{ url_for('static', path='/css/style.css') }}" rel="stylesheet">

    <!-- 内联导航栏样式（确保样式生效） -->
    <style>
        /* 导航栏美化样式 */
        .navbar.navbar-dark.bg-dark {
            padding: 0;
            height: 56px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 1030;
            position: relative;
        }

        .navbar .navbar-brand {
            font-size: 1.4rem;
            font-weight: 600;
            padding: 0 20px;
            height: 56px;
            display: flex;
            align-items: center;
        }

        .navbar .navbar-nav {
            height: 56px;
        }

        .navbar .nav-item {
            height: 100%;
            display: flex;
            align-items: center;
        }

        .navbar .nav-link {
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 20px;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            position: relative;
        }

        .navbar .nav-link i {
            font-size: 1.2rem;
            margin-right: 8px;
        }

        .nav-active-indicator {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #1890ff;
        }

        /* 悬停效果 */
        .navbar .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        /* 点击效果 */
        .navbar .nav-link:active {
            background-color: rgba(255, 255, 255, 0.2);
            transform: scale(0.98);
        }

        /* 选中效果 */
        .navbar .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: #fff;
            font-weight: 500;
        }

        .navbar .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #1890ff;
        }

        /* 移动端响应式样式 */
        @media (max-width: 991.98px) {
            /* 折叠菜单样式修复 */
            .navbar-collapse {
                background-color: #343a40;
                border-radius: 0 0 8px 8px;
                margin-top: 1px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                z-index: 9999 !important;
                position: relative;
            }

            .navbar-nav {
                padding: 10px 0 !important;
                height: auto !important;
            }

            .navbar .nav-item {
                width: 100% !important;
                height: auto !important;
                display: block !important;
            }

            .navbar .nav-link {
                color: #fff !important;
                padding: 15px 20px !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                height: auto !important;
                display: flex !important;
                align-items: center !important;
                white-space: nowrap;
                width: 100%;
                font-size: 1rem !important;
            }

            .navbar .nav-link i {
                font-size: 1.1rem !important;
                margin-right: 12px !important;
                min-width: 24px;
                text-align: center;
                flex-shrink: 0;
            }

            .nav-active-indicator {
                display: none !important;
            }

            .navbar .nav-link:hover {
                background-color: rgba(255, 255, 255, 0.1);
                color: #fff !important;
            }

            .navbar .nav-link.active {
                background-color: rgba(24, 144, 255, 0.2);
                color: #fff !important;
                border-left: 3px solid #1890ff;
            }

            .navbar .nav-link.active::after {
                display: none;
            }
        }
    </style>

    {% block head %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="padding: 0; height: 56px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);">
        <div class="container-fluid">
            <a class="navbar-brand" href="/" style="font-size: 1.4rem; font-weight: 600; padding: 0 20px; height: 56px; display: flex; align-items: center;">wxauto_Mgt</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link {% if request.url.path == '/' %}active{% endif %}" href="/">
                            <i class="fas fa-tachometer-alt"></i> 首页
                            {% if request.url.path == '/' %}
                            <span class="nav-active-indicator"></span>
                            {% endif %}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.url.path == '/instances' %}active{% endif %}" href="/instances">
                            <i class="fas fa-server"></i> 实例管理
                            {% if request.url.path == '/instances' %}
                            <span class="nav-active-indicator"></span>
                            {% endif %}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.url.path == '/platforms' %}active{% endif %}" href="/platforms">
                            <i class="fas fa-cogs"></i> 服务平台和规则
                            {% if request.url.path == '/platforms' %}
                            <span class="nav-active-indicator"></span>
                            {% endif %}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.url.path == '/messages' %}active{% endif %}" href="/messages">
                            <i class="fas fa-comments"></i> 消息监控
                            {% if request.url.path == '/messages' %}
                            <span class="nav-active-indicator"></span>
                            {% endif %}
                        </a>
                    </li>
                </ul>
                <!-- 用户菜单 -->
                <ul class="navbar-nav ms-auto" id="userMenu" style="display: none;">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user"></i> 用户
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" onclick="logout()">
                                <i class="fas fa-sign-out-alt"></i> 退出登录
                            </a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="container-fluid mt-3">
        {% block content %}{% endblock %}
    </div>

    <!-- 页脚 -->
    <footer class="footer mt-auto py-3 bg-light">
        <div class="container text-center">
            <span class="text-muted">wxauto_Mgt Web管理界面 &copy; 2025</span>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 通用JavaScript -->
    <script src="{{ url_for('static', path='/js/common.js') }}"></script>
    <!-- 轮询刷新 -->
    <script src="{{ url_for('static', path='/js/polling.js') }}"></script>

    <!-- 认证处理 -->
    <script>
        // 全局认证处理
        window.AuthManager = {
            // 获取存储的token
            getToken: function() {
                return localStorage.getItem('auth_token');
            },

            // 设置token
            setToken: function(token) {
                if (token) {
                    localStorage.setItem('auth_token', token);
                } else {
                    localStorage.removeItem('auth_token');
                }
            },

            // 清除token
            clearToken: function() {
                localStorage.removeItem('auth_token');
            },

            // 检查是否需要认证
            checkAuthRequired: async function() {
                try {
                    const response = await fetch('/api/auth/status');
                    const data = await response.json();
                    return data.code === 0 && data.data.password_required;
                } catch (error) {
                    console.error('检查认证状态失败:', error);
                    return false;
                }
            },

            // 重定向到登录页面
            redirectToLogin: function() {
                window.location.href = '/login';
            },

            // 为fetch请求添加认证头
            addAuthHeader: function(headers = {}) {
                const token = this.getToken();
                if (token) {
                    headers['Authorization'] = `Bearer ${token}`;
                }
                return headers;
            },

            // 处理认证错误
            handleAuthError: function(response) {
                if (response.status === 401) {
                    this.clearToken();
                    this.redirectToLogin();
                    return true;
                }
                return false;
            }
        };

        // 重写fetch函数，自动添加认证头
        const originalFetch = window.fetch;
        window.fetch = function(url, options = {}) {
            // 只为API请求添加认证头
            if (url.startsWith('/api/') && !url.includes('/api/auth/')) {
                options.headers = AuthManager.addAuthHeader(options.headers || {});
            }

            return originalFetch(url, options).then(response => {
                // 处理认证错误
                if (response.status === 401 && url.startsWith('/api/') && !url.includes('/api/auth/')) {
                    AuthManager.handleAuthError(response);
                }
                return response;
            });
        };

        // 登出函数
        function logout() {
            AuthManager.clearToken();
            window.location.href = '/login';
        }

        // 页面加载时检查认证状态
        document.addEventListener('DOMContentLoaded', async function() {
            // 如果当前页面不是登录页面，检查认证状态
            if (!window.location.pathname.includes('/login')) {
                const authRequired = await AuthManager.checkAuthRequired();
                if (authRequired) {
                    if (!AuthManager.getToken()) {
                        AuthManager.redirectToLogin();
                        return;
                    }
                    // 显示用户菜单
                    document.getElementById('userMenu').style.display = 'block';
                }
            }
        });
    </script>

    <!-- 导航栏交互效果 -->
    <script>
        // 立即执行，不等待DOMContentLoaded
        (function() {
            // 确保在页面加载后执行
            function initNavbarEffects() {
                console.log('初始化导航栏效果');

                // 为所有导航链接添加点击波纹效果（使用更通用的选择器）
                const navLinks = document.querySelectorAll('.navbar .nav-link');
                console.log('找到导航链接数量:', navLinks.length);

                navLinks.forEach(link => {
                    // 添加悬停效果
                    link.addEventListener('mouseenter', function() {
                        this.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
                        this.style.color = '#fff';
                    });

                    link.addEventListener('mouseleave', function() {
                        if (!this.classList.contains('active')) {
                            this.style.backgroundColor = '';
                        }
                    });

                    // 鼠标按下效果
                    link.addEventListener('mousedown', function() {
                        this.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
                        this.style.transform = 'scale(0.97)';
                    });

                    // 鼠标释放效果
                    link.addEventListener('mouseup', function() {
                        this.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
                        this.style.transform = 'scale(1)';
                    });

                    // 鼠标离开效果（防止鼠标在元素外释放导致效果残留）
                    link.addEventListener('mouseleave', function() {
                        this.style.transform = 'scale(1)';
                        if (!this.classList.contains('active')) {
                            this.style.backgroundColor = '';
                        } else {
                            this.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
                        }
                    });

                    // 如果是活动链接，设置背景色
                    if (link.classList.contains('active')) {
                        link.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
                        link.style.fontWeight = '500';
                    }
                });
            }

            // 如果DOM已经加载完成，立即执行
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initNavbarEffects);
            } else {
                initNavbarEffects();
            }

            // 为确保效果生效，在窗口加载完成后再次尝试初始化
            window.addEventListener('load', initNavbarEffects);

            // 在5秒后再次尝试初始化（以防之前的尝试失败）
            setTimeout(initNavbarEffects, 5000);
        })();
    </script>

    {% block scripts %}{% endblock %}
</body>
</html>
